<template>
    <div class="app-container">
        <el-row>
            <el-form :model="advertiseInfo" ref="qualifationForm" :rules="rules">
                <el-form-item label="产品档案" prop="production">
                    <!-- <el-select v-model="advertiseInfo.production" placeholder="请选择产品档案" class="selectStyle" :disabled="true">
                        <el-option v-for="item in archivesList" :key="item.id" :label="item.productionname" :value="item">
                        </el-option>
                    </el-select> -->
                    <el-input class="plainInput" type="text" v-model="advertiseInfo.production.productionname" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="orderno">
                    <el-input class="plainInput" type="number" v-model="advertiseInfo.orderno" :maxlength="4"></el-input>
                </el-form-item>
                <el-form-item label="产品照片" props="imageURL">
                    <div class="qulificationImg">
                        <!-- <el-upload class="avatar-uploader" :action="uploadUrl" 
                            :show-file-list="false" 
                            :on-success="handleQualificationSuccess" 
                            :before-upload="beforeQualificationUpload"
                            :disabled="true">
                            <img v-if="advertiseInfo.production.picture" :src="advertiseInfo.production.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload> -->
                        <img v-if="advertiseInfo.production.picture" :src="advertiseInfo.production.picture" class="avatar">
                        <div v-else></div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="btn">
                        <el-button @click="saveQulifation"><icon-svg icon-class="baocun1"></icon-svg>&nbsp;&nbsp;保存</el-button>
                        <el-button @click="cancel"><icon-svg icon-class="quxiao"></icon-svg>&nbsp;&nbsp;取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<style scoped>
.plainInput {
    width: 250px;
}

.el-select {
   width: 250px; 
}

.qulificationImg {
    margin-left: 70px;
    width: 250px;
    height: 178px;
    border: 1px dashed #d9d9d9;
}

/* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: default;
    position: relative;
    overflow: hidden;
} */

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 250px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 250px;
    height: 178px;
    display: block;
}

.btn {
    margin-left: 90px;
}

</style>

<script>
import { saveAdvertising, getNoSetHomeAdvertiseProduct } from 'api/advertise';
import { validateFakeno } from 'utils/validate';
import Cookies from 'js-cookie';

export default {
    data() {
        // 效验排序编号
        const checkFakeNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('排序编号不能为空,允许的范围为:1~9999'));
            }
            if (!validateFakeno(value)) {
                callback(new Error('允许数值范围为:1~9999'));
            } else {
                callback();
            }
        };
        // 效验产品信息
        const checkProduction = (rule, value, callback) => {
            if (!value.id) {
                return callback(new Error('请选择一个产品.'));
            }else{
                callback();  
            }
        };
        return {
            advertiseInfo: {
                apid: '',
                orderno: "",
                apstatus: '',
                apdeleted: '',
                apcreator: '',
                production: {
                    id: '',
                    productionname: '',
                    picture: '',
                },
            },
            // imageURL: '',
            archivesList: [],
            rules: {
                production: [{ validator: checkProduction, trigger: 'blur' }],
                orderno: [{ validator: checkFakeNumber, trigger: 'blur' }],
            },
            uploadUrl: '/trc-service-enterprise/enterprise/fileservice/upload?operatorid=' + Cookies.get('uid') + '&lastlogincode=' + Cookies.get('lastlogincode'),
            optionsData: [],
            loading: false
        }
    },
    computed: {
        imageURL: function() {
            return this.advertiseInfo.production.picture;
        },
    },

    created() {
        this.advertiseInfo.apid = this.$route.query.advertiseInfo.apid;
        this.advertiseInfo.orderno = this.$route.query.advertiseInfo.aporderno;
        this.advertiseInfo.apstatus = this.$route.query.advertiseInfo.apstatus;
        this.advertiseInfo.apdeleted = this.$route.query.advertiseInfo.apdeleted;
        this.advertiseInfo.apcreator = this.$route.query.advertiseInfo.apcreator;
        this.advertiseInfo.production.id = this.$route.query.advertiseInfo.aptracearchivesid;          
        this.advertiseInfo.production.productionname = this.$route.query.advertiseInfo.proName;
        this.advertiseInfo.production.picture = this.$route.query.advertiseInfo.proPicture;
        // this.fetchData();
    },
    methods: {
        // fetchData() {
        //     getNoSetHomeAdvertiseProduct().then(response => {
        //         let res = response.data;
        //         if (res.flag === 1) {
        //             this.archivesList = res.data;
        //             this.archivesList.push(this.advertiseInfo.production);
        //         }
        //     })
        // },
        saveQulifation() {
            let requestParams = {
                apid: this.advertiseInfo.apid, 
                aptype: 'ADV_HOMEPAGE',
                apstatus: this.advertiseInfo.apstatus,
                apdeleted: this.advertiseInfo.apdeleted,
                aptracearchivesid: this.advertiseInfo.production.id || '',
                apcreator: this.advertiseInfo.apcreator || '',
                aporderno: this.advertiseInfo.orderno || '',
                aplocal: '首页广告',
                operatorid: Cookies.get('uid')
            };
            this.$refs['qualifationForm'].validate(valid => {            
                if (valid) {
                    console.log(requestParams);
                    saveAdvertising(requestParams).then(response => {
                        let res = response.data;
                        if (res.flag === 1) {
                            this.$message({
                                showClose: true,
                                message: '首页广告编辑成功',
                                type: 'success'
                            });
                            this.$router.go(-1)
                        } else {
                            this.$message({
                                showClose: true,
                                message: '首页广告编辑失败',
                                type: 'error'
                            });
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.go(-1)
        },
        handleQualificationSuccess(res, file) {
            if (res.flag === 1) {
                this.qualifationForm.imageURL = res.data[0];
            } else {
                console.log(res.message);
            }
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeQualificationUpload(file) {
            const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') ;
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>